import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Comm extends React.Component {
  static defaultProps = {
    dataSource: {
        hzd: { total: 0.8, unit: 'NTU', isOk: 1 },
        co2: { total: 0.2, unit: 'mg/l', isOk: 1 },
        yd: { total: 0.3, unit: 'mg/l', isOk: 1 },
        dcgj: { total: 0, unit: 'NTU', isOk: 1 },
        jls: { total: 120, unit: 'CFU/ml', isOk: 0 },
        ph: { total: 0.3, unit: 'mg/l', isOk: 1 },
        yd: { total: 400, unit: 'mg/l', isOk: 1 },
        sd: { total: 0.5, unit: 'NTU', isOk: 1 },
        lhv: { total: 20, unit: 'mg/l', isOk: 1 }
    },
    columns: [],
    type: '1',
    options: [
      { vField: 'val', tField: '数量' },
      { vField: 'status', tField: '异常设备' },
      { vField: 'err', tField: '运行状态' },
    ],
    isColorful: true,
  }

  renderInner(params){
    const { type } = this.props;
    switch (type) {
        case '1':
            return this.Inner1(params);
        case '2':
          return this.Inner2(params);
        case '3':
          return this.Inner3(params);
        default:
            break;
    }
  }

  // 水质检测
  Inner1(params){
      let { dataSource, children } = this.props;
      let { field, unit } = params;
      unit = unit ? unit: '';
      return (<div className={styles.type1}>
        <div className={styles.num}>{dataSource[field] ? `${dataSource[field]}${unit}` : '无'}</div>
        {children}
      </div>)
  }

  // 在线监测
  Inner2(params){
    const { dataSource, options } = this.props;
    const { value: field } = params;
    let dom = null;
    if(options && Array.isArray(options)){
      dom = options.map((option, idx) => {
        const { vField, tField } = option;

        let val = null;
        let statusCls = styles.success
        if(dataSource[field]){
          if(vField === 'status'){
            if(dataSource[field][vField] === true){
              val = '正常';
              statusCls = styles.success;
            }else{
              val = '异常';
              statusCls = styles.error;
            }
            return(<label key={idx}>{tField}：<span className={statusCls}>{val}</span></label>)
          }else{
            val = dataSource[field][vField] || dataSource[field][vField] === 0 ? `${dataSource[field][vField]}` : '--'
            return(<label key={idx}>{tField}：<span>{val}</span></label>)
          }
        }
      })
    }
    return <div className={styles.type2}>{dom}</div>;
  }

  // 生产管理
  Inner3(params){
    const { dataSource } = this.props;
    const { field,options } = params;

    let dom = null;
    if(options && Array.isArray(options)){
      dom = options.map((option, idx) => {
        const { vField, tField } = option
        const val = dataSource[field] ? (dataSource[field][vField] || dataSource[field][vField] === 0 ? `${dataSource[field][vField]}` : '--') : '-';
        return(<label key={idx}>{tField}：<span>{val}</span></label>)
      })
    }

    const tVal = dataSource[field] ? (dataSource[field]['total'] || dataSource[field]['total'] === 0 ? `${dataSource[field]['total']}` : '--') : '-';
    return (<div className={styles.type3}>
      <div className={styles.num}>{tVal}</div>
      {dom}
    </div>);
  }

  render() {
    const { columns, className, isColorful, type } = this.props;
    const ColorfulClassName = isColorful ? styles.isColorful: '';
    const Header = styles[`header${type}`]
    return (
      <div className={`${styles.Comm} clearfix`}>
      {
        columns.map((ele,index) =>{
          const { unit, icon, label } = ele;
          return (
          <div key={index} className={`${styles.items} ${ColorfulClassName} ${styles[className]}`}>
            <div className={`${styles.header} ${Header}`}>
                {icon ? <div className={styles.icon}><Iconfont type={icon} /></div>: null}
                <span>{label}{(unit && this.props.type !== 1)? `(${unit})`:''}</span>
            </div>
            {this.renderInner(ele)}
          </div>)
        })
      }
    </div>
    );
  }
}

Comm.propTypes = {
  cloumn: PropTypes.object,
  isColorful: PropTypes.bool,
  icon: PropTypes.string,
}

export default Comm;
